<script setup>
import { ref } from 'vue';
const userSearchDate = ref({
  userid:'',
  username:'',
})
const tableData = [
  {
    userId: '1',
    studentId: '20160001',
    name: 'Tom',
    gender: '男',
    major: '计算机科学与技术',
    admissionYear: '2016',
    secondaryCollege: '信息工程学院',
    createTime: '2016-05-03',
  },
  {
    userId: '2',
    studentId: '20160002',
    name: 'Jerry',
    gender: '女',
    major: '软件工程',
    admissionYear: '2016',
    secondaryCollege: '信息工程学院',
    createTime: '2016-05-02',
  },
  // 其他用户数据...
]

const handleClick = (row) => {
  console.log('点击了详情按钮', row);
}

const currentPage4 = ref(1);
const pageSize4 = ref(10);
const size = ref('default');
const disabled = ref(false);
const background = ref(true);

const handleSizeChange = (newPageSize) => {
  console.log('每页显示数量改变', newPageSize);
}

const handleCurrentChange = (newPage) => {
  console.log('当前页改变', newPage);
}
</script>

<template>
  <!-- 搜索 -->
  <div class="search_box">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <span>用户账号</span>
          <el-input v-model="userSearchDate.userid" placeholder="请输入搜索用户账号"></el-input>
        </el-col>
        <el-col :span="6">
          <span>用户名</span>
          <el-input v-model="userSearchDate.username" placeholder="请输入搜索用户名"></el-input>
        </el-col>
      </el-row>
    </el-card>
  </div>
  <div class="list_box">
    <el-card class="box-card">
      <el-table size="large" :data="tableData" border class="table-style">
        <el-table-column prop="userId" label="普通用户ID" width="180" />
        <el-table-column prop="studentId" label="学号" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="gender" label="性别" width="100" />
        <el-table-column prop="major" label="专业" width="200" />
        <el-table-column prop="admissionYear" label="入学年份" width="120" />
        <el-table-column prop="secondaryCollege" label="所属二级学院" width="200" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope.row)">
              详情
            </el-button>
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table >
      <div class="pagination-block">
        <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[10, 20, 30, 40]"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.box-card{
  position: relative;
  min-height: 76vh;
}
.list_box {
  margin: 20px 0;
}
.pagination-block{
  position: absolute;
  bottom: 3rem;
  left: 4rem;
  margin-top: 1rem;
}
.search_box {
  .el-col {
    display: flex;
    align-items: center;

    span {
      width: 120px;
      text-align: right;
      margin-right: 10px;
      text-wrap: nowrap;
    }
  }
}
</style>
